<template>
	<div style="height: 100%;">
		<div class="approval_nav">
			<div>
				<router-link class="yuangong addcolcr" to="/approvalmanager/ApproveYuangong">员工</router-link>
				<router-link class="yuangong " to="/approvalmanager/Aprovetiaoke">调课</router-link>
				<router-link class="xuesheng " to="/approvalmanager/ApproveHuanke">换课</router-link>
			</div>
			<div class="seach">
				<el-input class="inputseach" v-model="inputmenu" :value="inputmenu"
					@keyup.enter.native="getinput" placeholder="请输入申请人姓名"></el-input>
				<el-button  @click="getinput" type="primary" icon="el-icon-search" style="background-color:#106ab1 ;">搜索</el-button>
			</div>
		</div>
		<div class="yuan_table">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="identifyNum" label="编号">
				</el-table-column>
				<el-table-column prop="userName" label="申请人">
				</el-table-column>
				<el-table-column prop="leaveType" label="请假类">
				</el-table-column>
				<el-table-column prop="leaveReason" label="请假原因" width="100px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="tableData[scope.$index].leaveReason"
							placement="right-end">
							<span class="tooitp">{{ tableData[scope.$index].leaveReason }}</span>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="leaveStarttime" label="请假时间" width="100px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="tableData[scope.$index].leaveStarttime"
							placement="right-end">
							<span class="tooitp">{{ tableData[scope.$index].leaveStarttime }}</span>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="leaveDay" label="天数">
				</el-table-column>
				<el-table-column prop="leaveStatus" label="审批状态">
					<template slot="header" slot-scope="scope">
						<el-dropdown @command="siftuser" trigger="click">
							<span class="el-dropdown-link">
								审批状态<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command=3>全部</el-dropdown-item>
								<el-dropdown-item command=0>未审批</el-dropdown-item>
								<el-dropdown-item command=1>通过</el-dropdown-item>
								<el-dropdown-item command=2>未通过</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
					<!-- <template slot-scope="scope">
						 <button @click="handleClick(scope.row.status)" >aaa</button>
						<span v-if="scope.row.leaveStatus == 0">未审批</span>
						<span v-if="scope.row.leaveStatus == 1" style="color: #6aad39;">通过</span>
						<span v-if="scope.row.leaveStatus == 2" style="color: #fe0000;">未通过</span>
					</template> -->
				</el-table-column>
				<el-table-column prop="leaveCreatetime" label="申请时间" width="100px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="tableData[scope.$index].leaveCreatetime"
							placement="right-end">
							<span class="tooitp">{{ tableData[scope.$index].leaveCreatetime }}</span>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="userId" label="审批人">
				</el-table-column>
				<el-table-column prop="status" label="操作" class="caobtn" width="150px">
					<template  slot-scope="scope">
						<el-button  :type="scope.row.leaveStatus == 0 ? 'success' : 'info'" @click="tongguo(scope.row)"
							size="small" style="background-color:green">通过</el-button>
						<el-button  :type="scope.row.leaveStatus == 0  ? 'danger' : 'info'" @click="notongguo(scope.row)"
							size="small" style="background-color:red">不通过</el-button>
					</template>
					<!-- <template  slot-scope="scope">
						
					</template> -->
				</el-table-column>
			</el-table>
			<div class="fenye_tou">
				<el-pagination  layout="prev, pager, next" :page-count="yeshu" :current-page.sync="pageIndex" @current-change="Switchpages" class="fenye">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {

			return {
				baseUrl: require("../js/baseUrl.js").baseUrl,
				inputmenu: "", //搜索的内容
				yeshu: 0, //总页数
				tableData: [],
				pageIndex: 1, //第几页
				pageSize: 5, //每页有几条数据
				status:"",
				userIdadmin:0,
			}
		},
		methods: {

			//切换页面
			Switchpages(row) {
				this.pageIndex = row
				this.gettable()
			},
			//获取员工列表数据
			gettable() {
				this.userIdadmin=Number(sessionStorage.getItem("userId"))
				if (this.inputmenu != '' && this.status!=null) {
					if (this.status == 3) {
						this.$http.post(this.baseUrl + "approval/empApprovalList", {
							pageIndex: this.pageIndex,
							pageSize: this.pageSize,
							userName: this.inputmenu,
							userId:this.userIdadmin
						}).then(res => {
							/*   console.log(res) */
							/*    console.log("获取") */
							var data = res.data
							if (data.code == 200) {
								this.tableData = data.data.approvalList
								this.yeshu = data.data.pageCount

							}

						})
					} else {
						this.$http.post(this.baseUrl + "approval/empApprovalList", {
							pageIndex: this.pageIndex,
							pageSize: this.pageSize,
							userName: this.inputmenu,
							leaveStatus: this.status,
							userId:this.userIdadmin
						}).then(res => {
							/*   console.log(res) */
							/*    console.log("获取") */
							var data = res.data
							if (data.code == 200) {
								this.tableData = data.data.approvalList
								this.yeshu = data.data.pageCount

							}

						})
					}

				}
				//审批
				else if (this.status!=null) {
					if (this.status == 3) {
						this.$http.post(this.baseUrl + "approval/empApprovalList", {
							pageIndex: this.pageIndex,
							pageSize: this.pageSize,
							userId:this.userIdadmin
						}).then(res => {
							/*   console.log(res) */
							/* console.log("审批") */
							var data = res.data
							if (data.code == 200) {
								this.tableData = data.data.approvalList
								this.yeshu = data.data.pageCount
								this.inputmenu = ""
							}

						})
					} else {
						this.$http.post(this.baseUrl + "approval/empApprovalList", {
							pageIndex: this.pageIndex,
							pageSize: this.pageSize,
							leaveStatus: this.status,
							userId:this.userIdadmin
						}).then(res => {
							/*   console.log(res) */
							/*   console.log("审批") */
							var data = res.data
							if (data.code == 200) {
								this.tableData = data.data.approvalList
								this.yeshu = data.data.pageCount
								this.inputmenu = ""
							}

						})
					}
				} else if (this.inputmenu != '') {
					this.$http.post(this.baseUrl + "approval/empApprovalList", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						userName: this.inputmenu,
						userId:this.userIdadmin
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("sousuo") */
						var data = res.data
						if (data.code == 200) {
							this.tableData = data.data.approvalList
							this.yeshu = data.data.pageCount
						}

					})
				} else {
					this.$http.post(this.baseUrl + "approval/empApprovalList", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						userId:this.userIdadmin
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.tableData = data.data.approvalList
							this.yeshu = data.data.pageCount
							this.inputmenu = ""
						}

					})
				}
			},
			//掉列表的接口
			Adjusttheinterface(status, userName) {

			},
			//审批状态
			siftuser(command) {
				
				this.pageIndex = 1
				if(command == 3){
					command=""
					this.status=command
				}else{
					this.status=command
				}
				
				// this.gettable(command)
				/* console.log(this.pageIndex) */
				this.gettable()
			},
			//搜索
			getinput() {
				this.pageIndex = 1
				/* console.log(this.inputmenu) */
				this.inputmenu = this.inputmenu.trim()
				this.gettable()
			},
			//通过
			tongguo(row) {
				
					let loaId = row.leaveId
					let leaveStatus = 1
					this.Passanddont(loaId, leaveStatus)
				

			},
			//不通过
			notongguo(row) {
				
					let loaId = row.leaveId
					let leaveStatus = 2
					this.Passanddont(loaId, leaveStatus)
				
			},
			//通不通过的接口
			Passanddont(loaId, leaveStatus) {
				/*  console.log(status) */
				this.$http.post(this.baseUrl + "approval/empApproval", {
					leaveId:loaId,
					leaveStatus:leaveStatus,
					userId:this.userIdadmin
				}).then(res => {
					/*  console.log(res) */
					this.gettable()
				})
			},
			// //审批人是不是他
			// getseluser(){
				
			// }

		},
		mounted() {
			this.gettable();
		}
	}
</script>

<style lang="less">
	.approval_nav {
		display: flex;
		justify-content: space-between;
	}

	.yuan_table {
		.tooitp {
			display: inline-block;
			width: 95px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.el-table .el-table__cell {
			padding: 3px 0 !important;
		}

		.el-table td.el-table__cell,
		.el-table th.el-table__cell.is-leaf {
			text-align: center;
		}

		.el-table::before {
			background-color: #f3f8fd;
		}

		.el-table__row {
			border-radius: 30px !important;
		}

		.el-table * {
			border: none !important;
		}

		.el-table .el-table__body {
			border-spacing: 0 15px;
		}

		.el-table th.el-table__cell {
			background: #f3f8fd;

		}

		.el-table {
			background: transparent;
		}

		/*     .el-table .cell {} */

		.el-table td.el-table__cell div {
			display: inline-block;

			button {
				font-size: 11px;
				margin: 0;
				margin-right: 5px;

			}
		}

		/* .el-table--enable-row-transition .el-table__body td.el-table__cell div{
        width:100px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
    } */

	}

	.seach {

		display: flex;
		height: 95px;
		align-items: center;
		padding: 7px 9px;

		.inputseach {
			width: 250px;
		}
	}

	.fenye_tou {
		text-align: center;


		.fenye {
			margin-top: 30px;
		}
	}
</style>